<template>

    <el-autocomplete class="inline-input" :value="value" :fetch-suggestions="querySearch" :placeholder="placeholder" :trigger-on-focus="hasQueryPara" clearable :hide-loading="hideloading" @select="handleSelect" @input="onInput">
        <template slot-scope="{ item }">
            <!-- <div @mouseover="mouseover" @mouseout="mouseout"> -->
            <span v-hightlight="{message:item.value ,keyword:value}" class="name" />
            <!-- <i :id="item.value"></i> -->
            <!-- </div> -->
        </template>

        <!-- <ul slot-scope="{ item }" @mouseover="mouseover" @mouseout="mouseout">
        <li>
          <!- <span v-html="brightenKeyword(item.value, value)"></span>   :style="styleObject"

          <span v-hightlight:[item.value]="value"></span>
          <i :id="item.value"></i>
        </li>
      </ul> -->
    </el-autocomplete>

</template>

<script>
import request from '@/utils/request'
import qs from 'qs'
module.exports = {
  name: 'autocomplete-input',
  data() {
    return {
      hideloading: true,
      styleObject: {
        // color: 'red',
        fontSize: '30px',
        hover: { fontSize: '20px' }
      },
      cli: '',
      hasQueryPara: false
    }
  },
  props: {
    // 检索参数
    p: {},
    bussinessurl: String,
    queries: {},
    // 当前属性的数据字段名称
    columnname: '',

    // text、num、
    type: {
      default: 'text'
    },
    // label提示文字
    name: {
      type: String
    },
    // 绑定的值
    value: {},
    // 提示文字
    placeholder: {},
    // 是否禁用
    disabled: {},
    // 是否换行
    br: {
      type: Boolean,
      default: false
    }
  },
  //   computed: {
  //     hasQuery: function() {
  //       console.log(this.queries.distinctColumnName !== undefined)
  //       return this.queries !== undefined && this.queries.distinctColumnName !== undefined
  //     }
  //   },
  watch: {
    queries: {
      handler: function() {
        this.hasQueryPara =
          this.queries !== undefined &&
          this.queries.distinctColumnName !== undefined &&
          this.queries.distinctColumnName.length > 0
      },
      deep: true
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var data = [{ value: '无匹配数据' }]
      if (!queryString || queryString.length === 0) {
        if (!this.hasQueryPara) {
          cb(data)
          return
        }
      }

      var cfg = this.queries
      cfg[this.columnname] = queryString
      cfg['distinctColumnName'] = this.columnname
      request({
        url: this.bussinessurl + '/inputsuggestion' + '?' + qs.stringify(cfg, { indices: false }),
        method: 'get'
      })
        .then(result => {
          result = result.filter(Boolean)
          if (result.length > 0) {
            data = result.map(x => ({ value: x }))
          }
          cb(data)
        })
        .catch(() => {
          cb(data)
        })
    },

    handleSelect(item) {
      this.$emit('input', item.value)
      this.$emit('autocompleted')
    },
    onInput: function($event) {
      this.$emit('input', $event)
    },
    // brightenKeyword(val, keyword) {
    //   const Reg = new RegExp(keyword, 'i');
    //   if (val) {
    //     return val.replace(Reg, `<span style="color: #E6A23C;">${keyword}</span>`);
    //   }
    // },
    mouseover(e) {
      //   if (e.target.tagName === 'DIV') {
      //     console.log('enter', e.target.tagName, e.target.id)
      //     //   $(e.target).children("i").css({ "font-size": "120%", "text-indent": "0px", "icon": "el-icon-search", "class": "fas hand-point-right" });
      //     // var top = $(e.target).children('i').addClass("el-icon-search").css('top')
      //     console.log(
      //       $(e.target)
      //         .children('i')
      //         .css('top')
      //     )
      //     $(e.target)
      //       .children('i')
      //       .addClass('el-icon-search')
      //       .css({ right: 10 })
      //     console.log('enter', e.target.style, e.target.id)
      //   }
    },
    mouseout(e) {
      //   if (e.target.tagName === 'DIV') {
      //     console.log('leave', e.target.tagName, e.target.id)
      //     $(e.target)
      //       .children('i')
      //       .removeClass('el-icon-search')
      //   }
    },
    mounted() {}
  },
  directives: {
    hightlight: {
      bind: function(el, binding) {
        var match = binding.value.keyword
        if (!match) {
          match = ''
        }

        const reg = new RegExp(match, 'g')
        const txt = binding.value.message
        let str = ''
        if (txt) {
          str = txt.replace(reg, `<span style="color:#F56C6C; ">${match}</span>`)
        } else {
          str = ''
        }
        el.innerHTML = str
      },
      componentUpdated: function(el, binding) {
        var match = binding.value.keyword
        if (!match) {
          match = ''
        }

        const reg = new RegExp(match, 'g')
        const txt = binding.value.message
        let str = ''
        if (txt) {
          str = txt.replace(reg, `<span style="color:#F56C6C; ">${match}</span>`)
        } else {
          str = ''
        }
        el.innerHTML = str
      }
    }
  }
}
</script>

<style scoped>
</style>

